/**
 * @class UI-条目组件-面板页签
 * @author DuskyHuang 圣子
*/

import { _decorator, Component, UITransform, Widget } from 'cc';
import { ItemList } from 'cfw';
import { IIconData } from '../../celestial';
import { LabelI18n } from '../label-i18n';
import { CelestialIcon } from './celestial-icon';
const { ccclass, property } = _decorator;

@ccclass('cocosmos.tab-card')
export class TabCard extends Component {

    @property(LabelI18n) public title: LabelI18n = null;
    @property(ItemList) public grids: ItemList<CelestialIcon> = null;

    public updateData(title: i18nKey, list: IIconData[]): void {
        this.title.string = title;
        this.grids.updateList(list);
        this._updateUI(list.length);
    }

    private _updateUI(num: num.posInt): void {
        const row = Math.ceil(num / COL_NUM);
        const height = row * ICON_SIZE + PADDING_TOP + PADDING_BTM;
        this.node.getComponent(UITransform).setContentSize(TAB_WIDTH, height);
        this.title.getComponent(Widget).updateAlignment();
    }

    public clear(): void {
        this.grids.freeAll();
    }
}

const COL_NUM: num.posInt = 8;
const ICON_SIZE: num.px = 90;
const TAB_WIDTH: num.px = COL_NUM * ICON_SIZE + 20;
const PADDING_TOP: num.px = 25;
const PADDING_BTM: num.px = 7;